import * as echarts from "echarts";
export const getUnionBudgetOption = () => {
  return {
    title: {
      top: 15,
      left: "center",
      textStyle: {
        fontSize: 16,
        color: "#fff",
      },
      text: "协会预算金额和使用情况",
    },

    legend: {
      right: 10,
      top: 15,
      textStyle: {
        fontSize: 13,
        color: "#2F89CF",
      },
      data: [
        { name: "预算金额", itemStyle: { color: "rgb(135, 208, 104,1)" } },
        { name: "使用金额", itemStyle: { color: "rgba(0,244,255,1)" } },
      ],
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      top: "25%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        data: ["娱乐", "器材", "出行", "活动", "补贴", "慰问"],
        axisLine: {
          lineStyle: {
            color: "rgba(255,255,255,0.12)",
          },
        },
        axisLabel: {
          margin: 10,
          color: "#2F89CF",
          textStyle: {
            fontSize: 14,
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "预算金额",
        axisLabel: {
          formatter: "{value}",
          color: "rgb(135, 208, 104,1)",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.12)",
          },
        },
      },
      {
        type: "value",
        name: "使用金额",
        axisLabel: {
          formatter: "{value}",
          color: "rgba(95, 187, 235, 1)",
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.12)",
          },
        },
      },
    ],
    series: [
      {
        name: "预算金额",
        type: "bar",
        data: [5000, 4000, 4000, 3000, 3500, 6000],
        tooltip: {
          valueFormatter: function (value: string | number) {
            return value + " 元";
          },
        },
        barWidth: "20px",
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgb(135, 208, 104,1)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgb(135, 208, 104,0.3)", // 100% 处的颜色
                },
              ],
              false
            ),
            barBorderRadius: [30, 30, 30, 30],
            shadowColor: "rgba(0,160,221,1)",
            shadowBlur: 4,
          },
        },
        label: {
          normal: {
            show: true,
            lineHeight: 20,
            width: 80,
            height: 20,
            backgroundColor: "rgba(0,160,221,0.1)",
            borderRadius: 60,
            position: ["-8", "-40"],
            distance: 1,
            formatter: ["    {d|●}", " {a|{c}元}     \n", "    {b|}", ""].join(
              ","
            ),
            rich: {
              d: {
                color: "#3CDDCF",
              },
              a: {
                color: "rgb(135, 208, 104,1)",
                align: "center",
              },
              b: {
                width: 1,
                height: 15,
                borderWidth: 1,
                borderColor: "#234e6c",
                align: "left",
              },
            },
          },
        },
      },
      {
        name: "使用金额",
        type: "bar",
        data: [1000, 2600, 1300, 1300, 1250, 1500],
        barWidth: "20px",
        tooltip: {
          valueFormatter: function (value: string | number) {
            return value + " 元";
          },
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(0,244,255,1)", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "rgba(0,77,167,1)", // 100% 处的颜色
                },
              ],
              false
            ),
            barBorderRadius: [30, 30, 30, 30],
            shadowColor: "rgba(0,160,221,1)",
            shadowBlur: 4,
          },
        },
        label: {
          normal: {
            show: true,
            lineHeight: 20,
            width: 80,
            height: 20,
            backgroundColor: "rgba(0,160,221,0.1)",
            borderRadius: 60,
            position: ["-8", "-40"],
            distance: 1,
            formatter: ["    {d|●}", " {a|{c}元}     \n", "    {b|}", ""].join(
              ","
            ),
            rich: {
              d: {
                color: "#3CDDCF",
              },
              a: {
                color: "rgba(0,244,255,1)",
                align: "center",
              },
              b: {
                width: 1,
                height: 15,
                borderWidth: 1,
                borderColor: "#234e6c",
                align: "left",
              },
            },
          },
        },
      },
    ],
  };
};
